import React, { Component } from "react";
import { Alert } from "antd";
import { currencyPrecisionCal, mulCalculate, messages } from "share/common";
import ResizeTable from "components/resize-table/resize-table";
import "styles/my-account/components/receipt-compare.scss";
import INVOICE_MAP from "../../expense/service/invoice-service";

class ReceiptCompare extends Component {
  constructor(props) {
    super(props);
    this.columns = [
      {
        title: messages("expense-1.key808") /*字段名称*/,
        dataIndex: "name",
      },
      {
        title: messages("expense-1.key809") /*原发票值（已存在）*/,
        dataIndex: "oldValue",
        render: this.handleRender,
      },
      {
        title: messages("expense-1.key810") /*当前发票值*/,
        dataIndex: "newValue",
        render: this.handleRender,
      },
    ];
  }

  handleRender = (value, record) => {
    const { key } = record;
    if (["nonDeductibleAmount", "feeWithoutTax", "tax", "taxString", "fee"].includes(key)) {
      const wrapValue = currencyPrecisionCal(this.props.currency, mulCalculate(value, 0.01));
      return wrapValue || value;
    }
    return INVOICE_MAP[key] ? INVOICE_MAP[key].render(value, this.props.invoiceInfo) : value;
  };

  render() {
    const { diffs = [] } = this.props;
    return (
      <section className="receipt-compare">
        <Alert
          type="info"
          message={
            messages(
              "expense-1.key811"
            ) /*系统内已存在相同发票，部分发票信息与您当前录入的不一致，需更正发票信息才能进行后续操作*/
          }
          className="receipt-compare-message"
        />

        <ResizeTable columns={this.columns} dataSource={diffs.filter((item) => !item.hide)} />
      </section>
    );
  }
}

ReceiptCompare.propTypes = {};

export default ReceiptCompare;
